<!DOCTYPE html>
<head>
    <title>Mercado Limbo</title>
    <?php include('common/head.php') ?>
</head>
<body>
    <main>
    <?php include('common/top-bar.php') ?>
        
    <div class="form alt-color">
        <header class="top-header">
            <h3>Publicá tu <strong>reuso</strong></h3>
            <p class="top-subheader">Completá el formulario y sumá tu producto al limbo</p>
        </header>
        <form action="">
            <div class="section-header">
                <i class="fa fa-question-circle"></i>
                <div class="step-n">1</div><h4>Detalles de la publicación</h4>
            </div>
            <div class="formfield">
                <div class="remaining">65</div>
                <input type="text" placeholder="Título" />
                <p class="help">Elegí un título descriptivo, y facil de entender.</p>
            </div>
            <div class="formfield">
                <input type="text" placeholder="$ Precio" />
                <p class="help">Ponele precio a tu reuso, si lo regalás pone “$0”.</p>
            </div>
            <div class="formfield">
                <div class="remaining">400</div>
                <textarea name="" id="" rows="10" placeholder="Descripción"></textarea>
                <p class="help">Pensa qué te gustaría saber sobre este reuso si lo fueses a comprar y describilo simplemente.</p>
            </div>
            <header class="atom-header">
                <h5>Subí fotos de tu rehuso</h4>
                <p class="atom-subheader">Podes cargar hasta 3 fotos por artículo.</p>
            </header>
            <div class="item-photos">
                <div class="photo-box">
                    <div class="photo">
                        <i class="fa fa-camera"></i>
                    </div>
                    <a href="" class="img-action">Cargar</a>
                </div><!--
                --><div class="photo-box">
                    <div class="photo">
                        <i class="fa fa-camera"></i>
                    </div>
                    <a href="" class="img-action">Cargar</a>
                </div><!--
                --><div class="photo-box">
                    <div class="photo">
                        <i class="fa fa-camera"></i>
                    </div>
                    <a href="" class="img-action">Cargar</a>
                </div>
            </div>

            <hr />

            <div class="section-header">
                <i class="fa fa-question-circle"></i>
                <div class="step-n">2</div><h4>Categorización</h4>
                <p class="section-subheader">Es importante que ubiques bien tu producto para
                que lo encuentren.</p>
            </div>
            
            <div class="formfield">
                <div class="labels-box">
                    <a href="#" class="open-labels">seleccionar</a>
                    <p>Categorías</p>
                    <ul class="sel-labels">
                        <li>Muebles</li>
                        <li>Decoración</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                        <li>Asientos</li>
                    </ul>
                </div>
                <p class="help">Listá los materiales que utilizaste.</p>
            </div>
            <div class="formfield">
                <div class="labels-box">
                    <a href="#" class="open-labels">seleccionar</a>
                    <p>¿Que materiales reutilizaste?</p>
                    <ul>
                    </ul>
                </div>
                <p class="help">Listá los materiales que utilizaste.</p>
            </div>
            <div class="formfield">
                <div class="labels-box">
                    <a href="#" class="open-labels">seleccionar</a>
                    <p>Etiquetas (ej: oficina, jardin, etc.)</p>
                    <ul>
                    </ul>
                </div>
                <p class="help">Las etiquetas son palabras clave que definen tu reuso.
                Pensá qué palabras ingresarias en el buscador para encontrarlo. Escribilas separadas por comas.</p>
            </div>
            
            <hr />

            <div class="section-header">
                <i class="fa fa-question-circle"></i>
                <div class="step-n">3</div><h4>Datos de contacto</h4>
                <p class="section-subheader">Seleccioná uno o mas metodos para que te contacten.</p>
            </div>
            
            <div class="checks with-input">
                <div>
                    <label>
                        <input name="" type="checkbox" value="" />
                        <div class="checkbox"><div class="checked"></div></div>
                    </label>
                    <div class="formfield">
                        <input type="text" placeholder="Teléfono (ej: +5411 XXXXXXX)" />
                    </div>
                </div>
                <div>
                    <label>
                        <input name="" type="checkbox" value="" />
                        <div class="checkbox"><div class="checked"></div></div>
                    </label>
                    <div class="formfield">
                        <input type="text" placeholder="Email (ej: yo@gmail.com)" />
                    </div>
                </div>
                <div>
                    <label>
                        <input name="" type="checkbox" value="" />
                        <div class="checkbox"><div class="checked"></div></div>
                    </label>
                    <div class="formfield">
                        <input type="text" placeholder="Facebook.com/" />
                    </div>
                </div>
            </div>
            <div class="checks">
                <label>
                    <input name="" type="checkbox" vlaue="" />
                    <div class="checkbox"><div class="checked"></div></div>
                    <span>Me interesa intercambiar este producto.</span>
                </label>
            </div>
            
            <div class="formfield half">
                <div class="select no-js">
                    <div class="current">provincia</div>
                    <i class="fa fa-caret-down"></i>
                    <select class="options" name="" id="">
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
                    </select>
                </div>
            </div><!--
            --><div class="formfield half">
                <div class="select no-js">
                    <div class="current">localidad</div>
                    <i class="fa fa-caret-down"></i>
                    <select class="options" name="" id="">
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
                    </select>
                </div>
            </div>
            
            <hr />
            <div class="formfield half">
                <button class="secondary-color-btn half">Vista Previa</button>
            </div><!--
            --><div class="formfield half">
                <button class="main-color-btn half">Publicar</button>
            </div>
        </form>
        <div class="delete-item">
            <a href="#"><i class="fa fa-trash-o"></i>Eliminar publicación</a>
        </div>
    </div>
    <?php include('common/footer.php') ?>
    </main>
    <?php include('common/scripts.php') ?>
    <script type="text/javascript">
        $('.select').removeClass('no-js');
        $(document).on('change', 'select', function(){
            var selected = $(this).val();
            $(this).siblings('.current').text(selected)
        })
    </script>
</body>
